<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>基础矢量图形</title>
    <style type="text/css">
        body{
            margin: 0;
            overflow: hidden;
            background: #fff;
        }
        #map{
            position: relative;
            height: 910px;
            border:1px solid #3473b7;
        }

        #toolbar {
            position: relative;
            padding-top: 5px;
            padding-bottom: 10px;
        }
    </style>
    <link href='./css/bootstrap.min.css' rel='stylesheet' />
    <link href='./css/bootstrap-responsive.min.css' rel='stylesheet' />
    <script src = '../libs/SuperMap.Include.js'></script>
    <script type="text/javascript">
        var map,layer,pointVector,dataAdded=false,
                host = document.location.toString().match(/file:\/\//) ? "http://localhost:8090" : 'http://' + document.location.host;
        url = host + "/iserver/services/map-world/rest/maps/World";
        function init()
        {
            map = new SuperMap.Map("map",{controls:[
                new SuperMap.Control.Zoom() ,
                new SuperMap.Control.Navigation() ,
                new SuperMap.Control.LayerSwitcher()
            ]});
            layer= new SuperMap.Layer.TiledDynamicRESTLayer("World", url, null,{maxResolution:"auto"});
            layer.events.on({"layerInitialized":addLayer});
            vector = new SuperMap.Layer.Vector("vector"/*, {renderers: ["Canvas2"]}*/);
            ///addData();

        }

        function addLayer(){

            map.addLayers([layer,vector]);
            //显示地图范围
            map.setCenter(new SuperMap.LonLat(0, 0), 0);
            document.onmousemove = function(e){
                var pie = new SuperMap.Pixel(e.x, e.y);
                var lonlat = map.getLonLatFromPixel(pie);
                console.log(Math.round(lonlat.lon) + "," + Math.round(lonlat.lat));
                var p = new SuperMap.Geometry.Point(Math.round(lonlat.lon), Math.round(lonlat.lat));
                addData(p);
            }
        }

        

        function addData(p)
        {
            vector.removeAllFeatures();
            function bbb(p) {
                var p1 = new SuperMap.Geometry.Point(30, 0),
                    p2 = new SuperMap.Geometry.Point(0, 0, "LTypeArc"),
                    p3 = p || new SuperMap.Geometry.Point(-55, 55),
                    p4 = new SuperMap.Geometry.Point(30, 30, "LTypeArc"),
                    p5 = new SuperMap.Geometry.Point(-30, 30),
                    p6 = new SuperMap.Geometry.Point(-30, -30);
                var points = [p1, p2, p3, p4, p5, p6];
                var circlePoints = SuperMap.Geometry.LineString.createLineEPS(points);
                for(var i = 0, len = circlePoints.length; i < len; i ++) {
                    var pointVector = new SuperMap.Feature.Vector(circlePoints[i]);
                    if(i == 0) {
                        pointVector.style={
                            fillColor:"red",
                            strokeColor:"yellow",
                            pointRadius:6
                        };  
                    } else if(i == circlePoints.length - 1) { 
                        pointVector.style={
                            fillColor:"green",
                            strokeColor:"yellow",
                            pointRadius:6
                        }; 
                    } else {
                        pointVector.style={                           
                            fillColor:"#C6E2FF",
                            strokeColor:"#FF00FF",
                            pointRadius:3
                        }; 
                    }  
                    vector.addFeatures([pointVector]);      
                }                           
                return circlePoints;
            }
            
            //bbb();
            var line1 =  new SuperMap.Geometry.LineString(bbb(p));
            var linecVector = new SuperMap.Feature.Vector(line1);
            linecVector.style={
                strokeColor:"#7B68EE",
                strokeWidth:2
            } ;
            vector.addFeatures([linecVector]);
        }
    </script>
</head>
<body onload="init()" >
<div id="map"></div>

</body>
</html>